<div class="counter" style="height: 100%;">
    <!-- <h2> {{counter}}</h2>
    <ui-button class="blue" @click="addition">+</ui-button>
    <ui-button @click="subtraction" >-</ui-button>
    <ui-file multi></ui-file> -->
    <div class="card" style="height: 100%;">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link" :class="{active:tab_index==1}" href="#" @click="setTabIndex(1)">压缩</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" :class="{active:tab_index==2}" href="#" @click="setTabIndex(2)">配置</a>
                </li>
            </ul>
        </div>
        <div class="card-body" style="height: 100%;">
            <div v-if="tab_index==1">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped" role="progressbar" :style="`width: ${finishProcess}%`" :aria-valuenow="finishProcess" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <br/>
                <div class="btn-group mr-2" role="group">
                    <a href="#" class="btn btn-primary btn-sm" @click="preview()">预览</a>
                </div>
                <div class="btn-group mr-2" role="group">
                    <a href="#" class="btn btn-primary btn-sm" @click="compression()">压缩</a>
                </div>
                <br/>
                <br/>
                <div v-if="!isNaN(leftCount)" >
                    <label class="desc_text" >Token =【{{currentToken.substr(0, 10)}}...】已使用次数：{{leftCount}}</label>
                    <br/>
                </div>
                <label class="desc_text" >总图片数：{{fileCount}}, 需要压缩：{{needComCount}}，已完成：{{finishCount}}，已失败：{{failCount}}</label>
                <br/>
                <label class="lead">结果</label>
                <div v-if="dirList.length > 0" class="overflow-auto shadow p-3 mb-5 bg-white rounded" style="height: 360px;" >
                    <ul class="list-group">
                        <li v-for="dirItem in dirList" class="list-group-item d-flex justify-content-between align-items-center">
                            {{dirItem.getDisplayPath()}}
                            <div>
                                <span class="badge badge-primary badge-pill">需要压缩{{dirItem.needComCount}}</span>
                                <span class="badge badge-success badge-pill">完成{{dirItem.successCount}}</span>
                                <span class="badge badge-secondary badge-pill">缓存{{dirItem.fileCount - dirItem.needComCount}}</span>
                                <span class="badge badge-danger badge-pill" v-if="dirItem.failCount>0">出错{{dirItem.failCount}}</span>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div v-if="tab_index==2">
                <h3>项目配置</h3>

                <span class="desc_text">
                    TinyPng的tokenKey，<a href="https://tinypng.com/developers" target="_blank" >点击免费申请：https://tinypng.com/developers</a>
                </span>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon0">tokenKeys</span>
                    </div>
                    <input type="text" class="form-control" id="tokenKeys" aria-describedby="basic-addon0" v-model="tokenKeys" >
                </div>
                <br/>
                <span class="desc_text">
                    配置过滤条件，不填则默认扫描所有目录，并压缩所有jpeg、jpg、png文件
                </span>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <select class="custom-select mr-sm-2" id="include_type" @change="setIncludeType" >
                            <option :selected="includeType==1" value="1" >排除目录</option>
                            <option :selected="includeType==2" value="2" >仅包含目录</option>
                        </select>
                    </div>
                    <input type="text" id="include_data" class="form-control" aria-describedby="basic-addon1" v-model="includeData" >
                </div>
                <p class="comm_text" v-if="includeType==1" >如“排除的目录”，并填"Script/main"，则assets/Script/main下的所有文件不会被扫描压缩，多个逗号隔开</p>
                <p class="comm_text" v-if="includeType==2" >如“仅包含目录”，请只匹配一层目录，多层目录会因为上层目录未包含而失败（后续优化），多个逗号隔开</p>

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon3">包含后缀</span>
                    </div>
                    <input type="text" class="form-control" id="suffix" aria-describedby="basic-addon3" v-model="suffixList" >
                </div>
                <p class="comm_text">一般不建议修改</p>

                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="hash_cache" v-model="doCache" >
                    <label class="form-check-label" for="hash_cache">缓存结果</label>
                    <p class="comm_text">通过文件hash自动缓存结果，避免无修改文件多次压缩</p>
                    <div class="btn-group mr-2" role="group">
                        <a href="#" class="btn btn-info btn-sm" @click="openCache()" >查看缓存记录</a>
                        <a href="#" class="btn btn-danger btn-sm" @click="clearCache()" >清空缓存</a>
                    </div>
                </div>

                <label class="desc_text">
                    <span style="color: red">修改配置记得点击保存</span>
                </label>
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group mr-2" role="group">
                        <a href="#" class="btn btn-primary btn-sm" @click="saveSetting()">保存设置</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>